<template>
	<view class="f-f-c">
		<u-navbar
		:autoBack="true" bgColor="#fff"
		leftIconColor='#000'
		:titleStyle="{ color: '#000'}"
		 title="动态详情" rightText='' :border="false" :placeholder="true">
			 
		</u-navbar>
		<u-swiper
		         height='502rpx'
				:list="list1"
				:indicator='true'
				:indicatorStyle='wz'
				indicatorMode='dot'
		>
		
		</u-swiper>
		<view class="bf p20 mainbox" :style="{height:mainheight}"
		 >
			<view class="f-s-b ">
				<span class="cr f56">￥400.00</span>
				<span class="c9 ">库存：50</span>
			</view>
			<view class="c3 f36 mt20">
				VFZ 无线充电音乐台灯多功能小夜灯蓝牙音
				箱床头氛围灯
			</view>
			<view class=" b-b cell-p c3 f28" >
				<view class="f-s-b ">
					<span>规格</span>
					<span class="f-c"  @click="show= true">
						音箱款<u-icon class="ml20" name="arrow-right" color="#999" size="16"></u-icon>
					</span>
				</view>
			</view>
			<view class=" b-b cell-p c3 f28">
				<view class="f-s-b">
					<span>颜色</span>
					<span class="f-c"  @click="show= true">
						奶茶棕<u-icon class="ml20" name="arrow-right" color="#999" size="16"></u-icon>
					</span>
				</view>
			</view>
			
			
			<view class="f-c" >
				<view class="btn" @click="navTo('/pages/shop/orderAdd')">
					立即购买
				</view>
			</view>
			
			
		</view>
		<u-popup :show="show" :round="10" mode="bottom" @close="close" @open="open">
			<view class="bf p40 mainboxPOP" 
			 >
				<view class="f-s-b" >
					<u--image :showLoading="true"
					 src="https://chaoyuanhuishou.oss-cn-beijing.aliyuncs.com/https://chaoyuanhuishou.oss-cn-beijing.aliyuncs.com/pro3.png" width="168rpx" height="168rpx" ></u--image>
					 <view class="f-f-c">
					 	<span class="cr f56">￥400.00</span>
					 	<span class="c9 f28 mt20">已选 奶茶棕 音效款</span>
					 </view>
					 <span class="c9 f24" style="margin-top: -40rpx;">库存：100</span>
				</view>
				<view class="c3 f36 mt20">
					<view class="mt40">
						颜色
					</view>
					<view class="f mt20">
						<view class="b-s p10">
							<u--image :showLoading="true"
							 src="https://chaoyuanhuishou.oss-cn-beijing.aliyuncs.com/https://chaoyuanhuishou.oss-cn-beijing.aliyuncs.com/pro3.png" width="168rpx" height="168rpx" ></u--image>
						</view>
					 
					</view>
				</view>
				<view class="c3 f36 mt10">
					<view class="mt40">
						规格
					</view>
					<view class="f mt20">
						<view class="b-s p10 c9 f-f-c p20 f28">
							<span>音响款</span>
							<span class="mt10">￥400</span>
						</view>
					 
					</view>
				</view>
				
				<view class="f-c mt40" >
					<view class="btnpop" @click="navTo('/pages/shop/orderAdd')">
						立即购买
					</view>
					
				</view>
				
				
			</view>
		</u-popup>
		
	</view>
</template>


<script>
	 export default {
		data() {
			return {
				list1:[
				'/static/huishou/https://chaoyuanhuishou.oss-cn-beijing.aliyuncs.com/pro3.png',
				'/static/huishou/https://chaoyuanhuishou.oss-cn-beijing.aliyuncs.com/pro3.png'],
				mainheight:0,
				wz:{
					bottom:'80px'
				},
				show:false,
			}
		},
		onReachBottom() {
			
		},
		onReady() {
			
		},
		onLoad(){
			
		},
		onShow() {
			this.getContentHeight()
		},
		methods: {
			 open() {
			        // console.log('open');
			  },
			  close() {
				this.show = false
				// console.log('close');
			  },
			// 设置scoll高度
			getContentHeight(){
				let that = this
				uni.getSystemInfo({
					success: function (res) {
						let windowHeight= res.windowHeight;
						that.mainheight = (windowHeight - 240  ) + 'px';
						// that.scrollerHeight = (windowHeight-50 - 80) + 'px'; // 给15px的底部间距然后还要减掉搜索位置高度
					}
				});
			},
		}
	}
</script>

<style lang='scss'>
	page,
	.content {
		min-height: 50%;
		background-color: #f8f8f8;
	}

	.bg1,.bg2,.bg3,.bg4{
		width: 338rpx;
		height: 164rpx;
		background: none;
		background-image: url('https://chaoyuanhuishou.oss-cn-beijing.aliyuncs.com/c1.png');
		background-size: 100% 100%;
		/* box-shadow: 0rpx 0rpx 8rpx 2rpx rgba(0,0,0,0.1); */
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		opacity: 1;
	}
	.bg2{
		background-image: url('https://chaoyuanhuishou.oss-cn-beijing.aliyuncs.com/c2.png');
	}
	.bg3{
		background-image: url('https://chaoyuanhuishou.oss-cn-beijing.aliyuncs.com/c3.png');
	}
	.bg4{
		background-image: url('https://chaoyuanhuishou.oss-cn-beijing.aliyuncs.com/c4.png');
	}
	.btn{
		position: absolute;
		bottom: 40rpx;
		left: 50%;
		transform: translate(-50%,0);
		width: 700rpx;
		height: 88rpx;
		background: linear-gradient(90deg, #31EB8D 0%, #4CC097 100%);
		box-shadow: 0rpx 2rpx 4rpx 2rpx rgba(0,0,0,0.16);
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		opacity: 1;
		font-weight: bold;
		color: #FFFFFF;
		text-align: center;
		line-height: 88rpx;
	
	}
	.mainbox{
		width: 100vw;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		margin-top: -58rpx;
		background: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 100;
	}
	.mainboxPOP{
		width: 100vw;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		margin-top: -58rpx;
		background: #fff;
	
	}
	.btnpop{
	
		width: 700rpx;
		height: 88rpx;
		background: linear-gradient(90deg, #31EB8D 0%, #4CC097 100%);
		box-shadow: 0rpx 2rpx 4rpx 2rpx rgba(0,0,0,0.16);
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		opacity: 1;
		font-weight: bold;
		color: #FFFFFF;
		text-align: center;
		line-height: 88rpx;
	}
	
</style>
